<template>
  <div class="about">
    <h1>关于页面</h1>
    <p>这是一个演示页面，展示了各种集成的库的使用</p>



    <div class="demo-section">
      <h2>语音录制转文本演示</h2>
      <VoiceRecorder
        :max-duration="180"
        :language="'zh'"
        @transcription-update="handleTranscriptionUpdate"
        @recording-start="handleRecordingStart"
        @recording-stop="handleRecordingStop"
        @error="handleRecordingError"
      />
    </div>

    <div class="demo-section">
      <h2>AI 流式对话演示</h2>
      <StreamOutput
        :ws-url="streamWsUrl"
        :stream-delay="30"
        :max-length="2000"
        :enable-mock-data="false"
        @submit="handleStreamSubmit"
        @stream-start="handleStreamStart"
        @stream-end="handleStreamEnd"
        @error="handleStreamError"
      />


    </div>

    <div class="demo-section">
      <h2>文本转语音演示</h2>
      <TextToSpeech
        :ws-url="ttsWsUrl"
        :max-length="1000"
        :enable-mock-data="false"
        @generate="handleTTSGenerate"
        @play="handleTTSPlay"
        @pause="handleTTSPause"
        @stop="handleTTSStop"
        @complete="handleTTSComplete"
        @error="handleTTSError"
      />

    </div>

    <div class="actions">
      <a-button @click="$router.push('/')">
        <template #icon>
          <ArrowLeft :size="16" />
        </template>
        返回首页
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue'
import { ref } from 'vue'
import { ArrowLeft } from 'lucide-vue-next'
import VoiceRecorder from '../components/Common/VoiceRecorder.vue'
import StreamOutput from '../components/Common/StreamOutput.vue'
import TextToSpeech from '../components/Common/TextToSpeech.vue'
// import { fetchExample } from '../api/example'



// 录音组件相关 - 现在使用文件上传+API转录的方式

// 流式输出组件相关
const streamWsUrl = ref('wss://www.codewin.top/codewin/ai/chat/qwen-stream') // 流式对话WebSocket地址

// 文本转语音组件相关
const ttsWsUrl = ref('wss://www.codewin.top/codewin/ai/speech/tts-stream') // 文本转语音WebSocket地址

// 录音事件处理
const handleTranscriptionUpdate = (text: string) => {
  console.log('转录文本更新:', text)
}

const handleRecordingStart = () => {
  console.log('开始录音')
}

const handleRecordingStop = () => {
  console.log('停止录音')
}

const handleRecordingError = (error: string) => {
  console.error('录音错误:', error)
}

// 流式输出事件处理
const handleStreamSubmit = (input: string) => {
  console.log('用户输入:', input)
}

const handleStreamStart = () => {
  console.log('开始流式输出')
}

const handleStreamEnd = (output: string) => {
  console.log('流式输出完成:', output)
}

const handleStreamError = (error: string) => {
  console.error('流式输出错误:', error)
}

// 文本转语音事件处理
const handleTTSGenerate = (text: string, voice: string) => {
  console.log('生成语音:', text, '语音:', voice)
}

const handleTTSPlay = () => {
  console.log('开始播放语音')
}

const handleTTSPause = () => {
  console.log('暂停播放语音')
}

const handleTTSStop = () => {
  console.log('停止播放语音')
}

const handleTTSComplete = (audioUrl: string) => {
  console.log('语音生成完成:', audioUrl)
}

const handleTTSError = (error: string) => {
  console.error('文本转语音错误:', error)
}

// const loading = ref(false)
// const data = ref<string>('')

// const fetchData = async () => {
//   loading.value = true
//   try {
//     const result = await fetchExample()
//     data.value = result
//   } catch (error) {
//     data.value = '请求失败'
//   } finally {
//     loading.value = false
//   }
// }
</script>

<style scoped>
.about {
  padding: 2rem;
  text-align: center;
  height: max(100vh, 1200px);
}

.demo-section {
  margin: 2rem 0;
}

.actions {
  margin-top: 2rem;
}
</style>
